<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="../dev/vendors/vue.js"></script>
  <!--<script id="tpl" type="text/x-template">
    <my-component></my-component>
  </script>
  <div id="example">
    <my-component></my-component>
  </div>-->
  <div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <child my-message="Hello Vue.js"></child>
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:my-message="parentMsg"></child>
    </div>
  </div>
  <script>
    // 注册
    // Vue.component('my-component', {
    //   template: '<div>A custom component!</div>'
    // })
    // var Child = {
    //   template: '<div>A custom component! {{ msg }}</div>',
    //   data: {
    //     msg: '123456'
    //   }
    // }
    // var vm = new Vue({
    //   el: '#example',
    //   template: document.getElementById('tpl'),
    //   components: {
    //     // <my-component> 将只在父模板可用
    //     'my-component': Child
    //   }
    // })

    var data = { counter: 0 }
    Vue.component('simple-counter', {
      template: '<button v-on:click="counter += 1">{{ counter }}</button>',
      // data 是一个函数，因此 Vue 不会警告，
      // 但是我们为每一个组件返回了同一个对象引用
      data: function () {
        return { counter: 0 }
      }
    })
    Vue.component('child', {
      // 声明 props
      props: ['myMessage'],
      // 就像 data 一样，prop 可以用在模板内
      // 同样也可以在 vm 实例中像 “this.message” 这样使用
      template: '<span>{{ myMessage }}</span>'
    })
    new Vue({
      el: '#example-2',
      data: {
        parentMsg: ''
      }
    })
  </script>

  <div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <currency-input v-model="price"></currency-input>
  </div>
  <script>
    Vue.component('currency-input', {
      template: '\
        <span>\
          $\
          <input\
            ref="input"\
            v-bind:value="value"\
            v-on:input="updateValue($event.target.value)">\
        </span>\
      ',
      props: ['value'],
      methods: {
        // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
        updateValue: function (value) {
          var formattedValue = value
            // 删除两侧的空格符
            .trim()
            // 保留 2 小数位
            .slice(0, value.indexOf('.') + 3)
          // 如果值不统一，手动覆盖以保持一致
          if (formattedValue !== value) {
            this.$refs.input.value = formattedValue
          }
          // 通过 input 事件发出数值
          this.$emit('input', Number(formattedValue))
        }
      }
    })
    Vue.component('button-counter', {
      template: '<button v-on:click="increment">{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        increment: function () {
          this.counter += 1
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
  </script>
</body>
</html>